<template>
  <div class="article_details" v-loading="loading">
    <Header></Header>
    <el-row justify="center" style="background: #f5f5f5;padding-bottom: 95px">
      <el-col :span="16" style="height: 100%">
        <!--          文章内容>-->
        <div style="margin-top: 30px;height: 100%">
          <!--              标题与细节-->
          <div style="display: flex;justify-content: center">
            <div style="width: 100%;display: flex;justify-content: center">
              <span style="font-size: 30px;font-weight: 800;cursor: pointer;user-select: none">{{ title }}</span>
              <div style="display: flex;align-items: center;color: #adacac;margin-left: 20px;margin-top: 5px">
                  <span style="user-select: none">
                    <el-icon style="margin-right: 5px"><avatar/></el-icon>
                    {{ articleInfo['author'] }}
                  </span>
                <span style="display: flex;align-items: center;margin-left: 10px; user-select: none">
                  <el-icon style="margin-right: 5px"><position/></el-icon>
                  {{ articleInfo['sort'] }}
                </span>
              </div>
            </div>
          </div>
          <el-card class="text" style="margin-top: 50px;height: 100%">
            <v-md-preview :text="content"></v-md-preview>
          </el-card>
        </div>
      </el-col>
      <Footer></Footer>
    </el-row>
  </div>
</template>

<script>
import ArticleDetails from "./ArticleDetails";
import Header from "../../components/Header.vue";
import {Avatar, Position} from "@element-plus/icons";
import Footer from "../../components/Footer.vue";
export default {
  name: "ArticleDetails",
  components: {
    Header,
    Avatar,
    Position,
    Footer
  },
  setup() {
    return {
      ...ArticleDetails()
    }
  }
}
</script>

<style>
.article_details {
  height: 100%;
  width: 100%;
  min-width: 810px;
}

::selection{
  background: #344449;
  color: #f8f8f8;
}

</style>